$(function () {
    $(".input input").focus(function () {

        $(this).parent(".input").each(function () {
            $("label", this).css({
                "line-height": "18px",
                "font-size": "18px",
                "font-weight": "100",
                "top": "0px"
            })
            $(".spin", this).css({
                "width": "100%"
            })
        });
    }).blur(function () {
        $(".spin").css({
            "width": "0px"
        })
        if ($(this).val() == "") {
            $(this).parent(".input").each(function () {
                $("label", this).css({
                    "line-height": "60px",
                    "font-size": "24px",
                    "font-weight": "300",
                    "top": "10px"
                })
            });

        }
    });


    $("#signIn").click(function (e) {
        var pX = e.pageX,
            pY = e.pageY,
            oX = parseInt($(this).offset().left),
            oY = parseInt($(this).offset().top);
        let buttonThis = this;
        let nickname = $("#nickname").val();
        let username = $("#username").val();
        let password = $("#password").val();
        let password2 = $("#password2").val();
        if (nickname == null || nickname == "") {
            alert("称呼不能是空的");
            return;
        }
        if (username == null || username == "") {
            alert("用户名不能是空的");
            return;
        }
        if (password == null || password == "") {
            alert("密码不能是空的");
            return;
        }
        if (password2 == null || password2 == "") {
            alert("请确认密码");
            return;
        }
        if (password != password2) {
            alert("确认密码 不正确");
            return;
        }
        $.ajax({
            url: "./userInfo/signIn",
            data: {
                nickname: nickname,
                username: username,
                password: password
            },
            type: "POST",
            dataType: "json",
            success: function (data) {
                console.log(data);
                if (data.state != "200") {
                    alert(data.reason);
                    return;
                }

                $(buttonThis).addClass("login")
                    .append('<span class="click-efect x-' + oX + ' y-' + oY + '" style="margin-left:' + (pX - oX) + 'px;margin-top:' + (pY - oY) + 'px;"></span>');
                $('.x-' + oX + '.y-' + oY + '').animate({
                    "width": "500px",
                    "height": "500px",
                    "top": "-250px",
                    "left": "-250px",
                }, 600);
                $("button", buttonThis).addClass('active').append("<i class=\"fa fa-check\"></i>");


                setTimeout(function () {
                    location.href = "./primary/index.html";
                }, 1000);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // 通常 textStatus 和 errorThrown 之中
                // 只有一个会包含信息
                //this; // 调用本次AJAX请求时传递的options参数
            }
        });

    });

    $("#loginButton").click(function (e) {
        let buttonThis = this;
        var pX = e.pageX,
            pY = e.pageY,
            oX = parseInt($(this).offset().left),
            oY = parseInt($(this).offset().top);
        let key = $("#name").val();
        let pass = $("#pass").val();
        if (key == null || key == "") {
            alert("用户名不能是空的！");
            return;
        }
        if (pass == null || pass == "") {
            alert("密码不能是空的！");
            return;
        }
        $.ajax({
            url: "./userInfo/loginVerify",
            data: {
                username: key,
                password: pass
            },
            type: "POST",
            dataType: "json",
            success: function (data) {
                console.log(data);
                if (data.state == "200") {
                    console.log(data.reason);

                    $(buttonThis).append('<span class="click-efect x-' + oX + ' y-' + oY + '" style="margin-left:' + (pX - oX) + 'px;margin-top:' + (pY - oY) + 'px;"></span>')
                    $('.x-' + oX + '.y-' + oY + '').animate({
                        "width": "500px",
                        "height": "500px",
                        "top": "-250px",
                        "left": "-250px",
                    }, 600);
                    $("button", buttonThis).addClass('active');

                    setTimeout(function () {
                        location.href = "./index";
                    }, 1000);
                    return;
                }
                alert(data.reason);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // 通常 textStatus 和 errorThrown 之中
                // 只有一个会包含信息
                //this; // 调用本次AJAX请求时传递的options参数
            }
        });
    })

    $(".alt-2").click(function () {
        if (!$(this).hasClass('material-button')) {
            $(".shape").css({
                "width": "100%",
                "height": "100%",
                "transform": "rotate(0deg)"
            })

            setTimeout(function () {
                $(".overbox").css({
                    "overflow": "initial"
                })
            }, 600)

            $(this).animate({
                "width": "140px",
                "height": "140px"
            }, 500, function () {
                $(".box").removeClass("back");

                $(this).removeClass('active')
            });

            $(".overbox .title").fadeOut(300);
            $(".overbox .input").fadeOut(300);
            $(".overbox .button").fadeOut(300);

            $(".alt-2").addClass('material-buton');


        }
        $(".input input").focus();
        $(".input input").blur();

    })

    $(".material-button").click(function () {

        if ($(this).hasClass('material-button')) {
            setTimeout(function () {
                $(".overbox").css({
                    "overflow": "hidden"
                })
                $(".box").addClass("back");
            }, 200)
            $(this).addClass('active').animate({
                "width": "800px",
                "height": "800px"
            });

            setTimeout(function () {
                $(".shape").css({
                    "width": "50%",
                    "height": "50%",
                    "transform": "rotate(45deg)"
                })

                $(".overbox .title").fadeIn(300);
                $(".overbox .input").fadeIn(300);
                $(".overbox .button").fadeIn(300);
            }, 700)

            $(this).removeClass('material-button');

        }

        if ($(".alt-2").hasClass('material-buton')) {
            $(".alt-2").removeClass('material-buton');
            $(".alt-2").addClass('material-button');
        }

        setTimeout(function () {
            $(".input input").focus();
            $(".input input").blur();
        }, 700);

    });
    $(".input input").focus();
    $(".input input").blur();
});